<template>
  <div class="version-manage">
    <div class="box-top">
      <el-form>
        <el-form-item label="操作系统">
          <el-select clearable v-model="system" placeholder="请选择操作系统">
            <el-option v-for="(item, i) in systemList" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="currentPage=1;init()">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-mid">
      <el-button type="primary" @click="handleAdd(true)">新增</el-button>
    </div>
    <div class="box-table">
      <el-table v-loading="loading" border :data="tableData" tooltip-effect="dark">
        <el-table-column prop="create_time" align="center" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="system" align="center" label="操作系统" show-overflow-tooltip></el-table-column>
        <el-table-column prop="version" align="center" label="版本号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="is_required_name" align="center" label="是否强制更新" show-overflow-tooltip></el-table-column>
        <el-table-column prop="content" align="center" label="更新内容" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="下载地址" show-overflow-tooltip width="250">
          <template slot-scope="scope">
            <a style="color:#409EFF;text-decoration:none;" :href="scope.row.apk_url">{{scope.row.apk_url}}</a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleAdd(false, scope.row)" type="text">修改</el-button>
            <el-button @click="handleRemove(scope.row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="550px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="操作系统" prop="system">
          <el-select clearable v-model="ruleForm.system" placeholder="请选择操作系统">
            <el-option v-for="(item, i) in systemList" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主版本号" prop="version_main">
          <el-input placeholder="请输入主版本号" clearable v-model="ruleForm.version_main"></el-input>
        </el-form-item>
        <el-form-item label="次版本号" prop="version_mini">
          <el-input placeholder="请输入次版本号" clearable v-model="ruleForm.version_mini"></el-input>
        </el-form-item>
        <el-form-item label="修订版本号" prop="version_no">
          <el-input placeholder="请输入修订版本号" clearable v-model="ruleForm.version_no"></el-input>
        </el-form-item>
        <el-form-item label="强制更新" prop="is_required">
          <el-radio-group v-model="ruleForm.is_required">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="APP下载地址" prop="apk_url">
          <el-upload action="/v1/common/uploadFile" :on-success="uploadSuccess" :multiple="false" :headers="headers" :show-file-list="false">
            <div class="upload-apk">
              <el-button type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">注意：请先上传已经下载的APP安装包(.apk文件)</div>
            </div>
          </el-upload>
          <el-input placeholder="请先上传已经下载的APP安装包" clearable v-model="ruleForm.apk_url"></el-input>
        </el-form-item>
        <el-form-item label="版本更新内容" prop="content">
          <el-input type="textarea" :rows="2" placeholder="请输入版本更新内容" v-model="ruleForm.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'VersionManage',
  data () {
    return {
      headers: {
        'access-token': localStorage.getItem('token') || ''
      },
      loading: false,
      id: null,
      system: '',
      systemList: [
        { name: 'ios', value: 'ios' },
        { name: 'android', value: 'android' }
      ],
      title: '新增APP版本',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dialogVisible: false,
      tableData: [],
      ruleForm: {
        system: '',
        version_main: '',
        version_mini: '',
        version_no: '',
        is_required: '',
        apk_url: '',
        content: ''
      },
      rules: {
        system: [
          { required: true, message: '请选择操作系统', trigger: 'change' }
        ],
        version_main: [
          { required: true, message: '请输入主版本号', trigger: 'blur' }
        ],
        version_mini: [
          { required: true, message: '请输入次版本号', trigger: 'blur' }
        ],
        version_no: [
          { required: true, message: '请输入修订版本号', trigger: 'blur' }
        ],
        is_required: [
          { required: true, message: '请选择是否强制更新', trigger: 'blur' }
        ],
        apk_url: [
          { required: true, message: '请先上传已经下载的APP安装包', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入版本更新内容', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    ...mapActions({
      getInitData: 'versionManage/getInitData',
      update: 'versionManage/update',
      add: 'versionManage/add',
      remove: 'versionManage/remove'
    }),
    uploadSuccess (res) {
      if (res.code === 0) {
        this.$message.success('文件上传成功')
        this.ruleForm.apk_url = res.data.url
      }
    },
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.updateData()
        } else {
          return false
        }
      })
    },
    updateData () {
      let str = this.title === '新增APP版本' ? 'add' : 'update'
      if (this.title === '新增APP版本') {
        str = 'add'
      } else {
        str = 'update'
        this.ruleForm.id = this.id
      }
      this[str](this.ruleForm).then(res => {
        if (res) {
          this.init()
          this.$message.success('保存成功')
          this.dialogVisible = false
        }
      })
    },
    init () {
      const params = {
        system: this.system,
        pageSize: this.pageSize,
        page: this.currentPage
      }
      this.loading = true
      this.getInitData(params).then(res => {
        const { list, total } = res
        this.tableData = list
        this.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    handleRemove (id) {
      const params = {
        id
      }
      this.remove(params).then(res => {
        if (res) {
          this.init()
          this.$message.success('删除成功')
        }
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleReset () {
      this.system = ''
    },
    handleAdd (isNew, item) {
      this.dialogVisible = true
      if (isNew) {
        this.title = '新增APP版本'
        let data = this.$refs['ruleForm']
        if (data) {
          data.resetFields()
        }
      } else {
        this.title = '修改APP版本'
        this.id = item.id
        this.ruleForm = {
          system: item.system,
          version_main: item.version_main,
          version_mini: item.version_mini,
          version_no: item.version_no,
          is_required: item.is_required,
          apk_url: item.apk_url,
          content: item.content
        }
      }
    }
  }
}
</script>
<style lang="less">
  .version-manage {
    .el-textarea__inner {
      width: 260px;
    }
    .upload-apk {
      white-space: nowrap;
      padding-bottom: 10px;
      .el-upload__tip {
        margin: 0;
        padding-left: 10px;
        display: inline;
      }
    }
  }
</style>
